<template>
<div class="role-management-add views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">添加角色</div>
        <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="角色名称">
                    <el-input v-model.trim="formFormatData.formData.name">
                    </el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input :autosize="{ minRows: 4, maxRows: 4}" type="textarea" v-model.trim="formFormatData.formData.role_describe">
                    </el-input>
                </el-form-item>
                <!-- <el-form-item label="状态">
                    <el-radio-group v-model="formFormatData.formData.is_use">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <el-form-item label="操作权限">
                  <el-checkbox :indeterminate="isCheckAll" v-model="checkAllModel" @change="checkMainAll">全选</el-checkbox>
                    <div style="margin-top:20px;" v-for="(item, index) in formFormatData.formData.jurisdiction" :key="index">
                        <el-checkbox :indeterminate="item.isIndeterminates" v-model="item.checkAll" @change="handleCheckAllChange(item)">{{item.title}}</el-checkbox>
                        <el-checkbox-group style="margin-left:50px;" v-model="item.checkList" @change="handlecheckedListChange(item)">
                            <el-checkbox v-for="(citem, cindex) in item.menu" :label="citem.path" :key="cindex">{{citem.title}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
                <el-form-item label="授权渠道">
                  <el-checkbox v-for="(item,index) in formFormatData.formData.power.totalChanel" :key="index" v-model="item.open">{{item.value}}</el-checkbox><br>
                </el-form-item>
                <el-form-item label="授权应用">
                  <el-checkbox v-for="(item,index) in formFormatData.formData.power.totalPlugins" :key="index" v-model="item.open">{{item.value}}</el-checkbox>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/permission/roleManagement', code: 1 }})" type="primary">保存</el-button>
        <router-link tag="span" to="/permission/roleManagement">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import {
  getStoreRoleInfo,
  updateStoreRoleInfo,
  getRoleMenu,
  addStoreRoleInfo
} from '@/api/setting'
import {
  storeMenu
} from '@/api/platform'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'RoleManagementAdd',
  created() {
    if (!this.$route.query.store_role_id) {
      getRoleMenu().then((response) => {
        const {
          data: {
            data: mesdata = []
          }
        } = response
        console.log("佛挡杀佛的科技属",mesdata)
        this.formFormatData.formData.jurisdiction = this.filters(mesdata)
        console.log(this.formFormatData.formData.jurisdiction)
      })
    }
    if (!this.isFormEdit) {
      this.getstoreMenu()
    }
  },
  computed: {
    filterDeepItem() {
      return item => {
        return item.filter((citem) => {
          return Array.isArray(citem.menu)
        })
      }
    }
  },
  data() {
    return {
      isCheckAll: false,
      checkAllModel: false,
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: getStoreRoleInfo,
            params: {},
            redirect: 'store_role_id'
          },
          submitForm: this.$route.query.store_role_id ? updateStoreRoleInfo : addStoreRoleInfo
        },
        formData: {
          name: '',
          jurisdiction: [],
          is_use: 1,
          role_describe: '',
          power: {
            totalChanel: {},
            totalPlugins: {}
          }
        },
        rules: {
          nickname: [{
            required: true,
            message: '请输入真实姓名',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '请输入用户手机号',
            trigger: 'blur'
          }
          ]
        }
      }
    }
  },
  methods: {
    checkMainAll(val) {
      console.log(val)
      if (val) {
        this.formFormatData.formData.jurisdiction.map(item => {
          const rusult = []
          item.checkAll = true
          item.menu.map(minItem => {
            rusult.push(minItem.path)
            item.checkList = rusult
          })
        })
        // this.formFormatData.formData.power.totalChanel.map(item => {
        //   item.open = true
        // })
        // console.log(this.formFormatData.formData.power.totalPlugins, 'totalPlugins')
        // this.formFormatData.formData.power.totalPlugins.map(item => {
        //   item.open = true
        // })
        console.log(this.formFormatData.formData.jurisdiction, 'true')
      } else {
        this.formFormatData.formData.jurisdiction.map(item => {
          item.checkAll = false
          item.checkList = []
          // this.formFormatData.formData.power.totalChanel.map(item => {
          //   item.open = false
          // })
          // this.formFormatData.formData.power.totalPlugins.map(item => {
          //   item.open = false
          // })
        })
        console.log(this.formFormatData.formData.jurisdiction, 'false')
      }
    },
    filters(mesdata) {
      // 给每一个都加上isIndeterminates属性,默认为false
      mesdata.map(item => {
        item.checkAll = false
        item.checkList = []
        item.isIndeterminates = false
        if (item.menu) {
          item.menu.map(citem => {
            citem.checkAll = false
            citem.checkList = []
            citem.isIndeterminates = false
          })
        }
      })
      return mesdata
    },
    getstoreMenu() {
      storeMenu().then(res => {
        const { data: { totalChanel, totalPlugins } } = res.data || {}
        this.formFormatData.formData.power.totalChanel = totalChanel
        this.formFormatData.formData.power.totalPlugins = totalPlugins
      })
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editBeforeForm') {
        if (Array.isArray(data.jurisdiction) && data.jurisdiction.length > 0) {
          data.jurisdiction.map(item => {
            console.log("fdsjkfhjkfddshfj反對和軍方的實際花費的時間開發計劃地方",item)

            const { menu, checkList } = item
            item.checkAll = item.checkAll === 'true'
            item.isIndeterminates = item.isIndeterminates === 'true'
            item.menu = !Array.isArray(menu) ? [] : item.menu
            item.checkList = !Array.isArray(checkList) ? [] : item.checkList
          })
        }
      }
    },
    handleCheckAllChange(index) {
            console.log(index, 'index12123123121321')
      const menulen = index['menu']['length']
      const currentlen = index['checkList']['length']
      index['isIndeterminates'] = false
      if (menulen === currentlen) {
        index['checkList'] = []
      } else {
        const arr = []
        index['menu'].map((item, index) => {
          arr.push(item.path)
        })
        index['checkList'] = arr
      }
    },
    handlecheckedListChange(index) {
      console.log('ssssssssssssss', index)
      const menulen = index['menu']['length']
      const currentlen = index['checkList']['length']
      index['checkAll'] = (menulen === currentlen)
      index['isIndeterminates'] = (currentlen > 0 && currentlen < menulen)
    }
  }
}
</script>
